<template>
    <div id="body">
        <!-- 头部 -->
        <div class="head">
            <div class="head-one"><span
                    style="color:rgba(0, 0, 0, 0.447058823529412);">车行管理</span>&nbsp;/&nbsp;<span>区域管理</span>&nbsp;/&nbsp;<span>车位详情</span>
            </div>
            <div class="head-two">车位详情</div>
        </div>
        <!-- 空白部分 -->
        <div class="mid"></div>
        <!-- 车位信息部分 -->
        <div class="carMessage">
            <div class="carHead">
                车位信息
                <a @click="EditOne">编辑</a>
            </div>
            <div class="carBox">
                <div>
                    区域：<span>地下停车场A区</span>
                </div>
                <div>
                    车位编号：<span>A2-01</span>
                </div>
                <div>
                    车位面积：<span>11㎡</span>
                </div>
                <div>
                    楼层：<span>B1</span>
                </div>
                <div>
                    车位类型：<span>产权车位</span>
                </div>
                <div>
                    车位状态：<span>自用</span>
                </div>
                <div>
                    持有人：<span>蒋锋</span>
                </div>
                <div>
                    添加时间：<span>2019-09-09 10:40</span>
                </div>
                <div>
                    添加人：<span>林莉莉</span>
                </div>
                <div>
                    备注：<span>无</span>
                </div>
            </div>
        </div>
        <!-- 车辆信息 -->
        <div class="carMessage">
            <div class="carHead">
                车辆信息
                <a @click="EditTwo">编辑</a>
            </div>
            <div class="carBox">
                <div>
                    车牌号：<span>浙B·N6698</span>
                </div>
                <div>
                    车辆品牌：<span>宝马</span>
                </div>
                <div>
                    车辆型号：<span>i8</span>
                </div>
                <div>
                    车身颜色：<span>白色</span>
                </div>
                <div>
                    备注：<span>无</span>
                </div>
                <div class="carImg">
                    车辆照片 <div class="imgBox"><img src="#" alt=""></div>
                </div>
            </div>
        </div>

        <!-- 第二个空白部分 -->
        <div class="mid"></div>
    </div>
</template>

<script>
export default {
    name: 'ParkCheck',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {
        EditOne() {
            this.$router.replace("/ParKingEdit")
        },
        EditTwo() {
            this.$router.replace("/TheVehicleEdit")
        }
    },
};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

#body {
    margin: 0px;
    background-color: rgba(240, 242, 245, 1);
    background-image: none;
    width: 1136px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;

    .head {
        border-width: 0px;
        left: 24px;
        top: 24px;
        font-family: 'MalayalamMN', 'Malayalam MN', sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        left: 0px;
        top: 0px;
        width: 1136px;
        height: 97px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(233, 233, 233, 1);
        border-radius: 2px;
        box-shadow: none;

        .head-one {
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            line-height: 22px;
            color: #333333;
            align-self: center;
            padding: 16px 0px 0px 32px;
            box-sizing: border-box;
            width: 100%;
        }

        .head-two {
            align-self: flex-start;
            padding: 16px 0px 16px 32px;
            box-sizing: border-box;
            width: 100%;
            visibility: inherit;
            font-weight: 700;
            font-style: normal;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.847058823529412);
            line-height: 28px;
        }
    }

    // 空白部分
    .mid {
        padding: 20px;
        box-sizing: border-box;
        margin-top: 20px;
        width: 1136px;
        display: flex;
        font-family: 'MalayalamMN', 'Malayalam MN', sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        background-color: #ffffff;
        border-color: #e9e9e9;
        border-width: 1px;
        border-style: solid;
        color: #333333;
        line-height: normal;
        text-transform: none;
    }

    // 车位信息部分
    .carMessage {
        padding: 20px;
        box-sizing: border-box;
        margin-top: 20px;
        width: 1136px;
        display: flex;
        flex-direction: column;
        font-family: 'MalayalamMN', 'Malayalam MN', sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        background-color: #ffffff;
        border-color: #e9e9e9;
        border-width: 1px;
        border-style: solid;
        color: #333333;
        line-height: normal;
        text-transform: none;
        border-radius: 2px;

        .carHead {
            align-self: flex-start;
            padding: 16px 0px 16px 32px;
            box-sizing: border-box;
            width: 100%;
            font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
            font-weight: 500;
            font-style: normal;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.847058823529412);
            line-height: 28px;

            a {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                color: #1890FF;
                font-size: 14px;
                text-align: left;
                width: 28px;
                height: 19px;
                margin-left: 15px;
            }
        }

        .carBox {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 0px 0px 16px 32px;

            div {
                margin-top: 20px;
                width: 350px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.847058823529412);

                span {
                    padding-left: 10px;
                }
            }

            .carImg {
                width: 410px;
                display: flex;
                line-height: 50px;

                .imgBox {
                    padding-left: 10px;

                    img {
                        width: 233px;
                        height: 120px;
                        display: flex;
                        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 14px;
                        color: rgba(153, 153, 153, 0.988235294117647);
                        box-shadow: none;
                    }
                }
            }
        }
    }
}
</style>